<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>产品中心</title>
  <link rel="stylesheet" href="./css/product.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> 
  <link rel="stylesheet" href="./css/reset.css">
</head>
<body>
  <div class="container">
    <div class="header">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./images/aboutus/bg.png" alt="">
            </div>
            <div class="bg-swiper swiper-slide">
              <img src="./images/background1.png" alt="">
            </div>
            <div class="bg-swiper swiper-slide">
              <img src="./images/aboutus/bg.png" alt="">
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        
        <div class="header-container">
          <div class="header-content">
            <div class="logo">
              <img class="logo-img" src="./images/logo.png" alt="">
            </div>
            <div class="header-nav">
              <div>
                <a href="./index.html">
                  <span>首页</span>
                </a>
              </div>
              <div>
                <a href="./about-us.html">
                  <span>关于我们</span>
                </a>
              </div>
              <div>
                <a href="./product.html">
                  <span class="header-nav-active">产品中心</span>
                </a>
              </div>
              <div>
                <a href="./news.html">
                  <span>新闻动态</span>
                </a>
              </div>
            </div>
          </div>
          <div class="header-desc">
            <div class="header-img">
              <img src="./images/aboutus/bg-content.png" alt="">
            </div>
          </div>
        </div>
    </div>
    <div class="product">
        <div class="body-title">
          <img src="./images/aboutus/location.png" alt="">
          <p>您目前的位置：产品中心</p>
        </div>
        <div class="body-content">
          <div class="content-left">
            <div class="left-logo">
              <img src="./images/aboutus/content-logo.png" alt="">
            </div>
            <div class="left-comm left-active">包装饮用水</div>
            <div class="left-comm ">企业建设</div>
            <div class="left-comm ">企业荣誉</div>
          </div>
          <div class="content-right">
            <div class="right-title">
              <img src="./images/product/product-title.png" alt="">
            </div>
            <div class="right-body">
              <a href="javascript:void(0)">
                <img src="./images//product/product-img.png" alt="">
              </a>
              <a href="javascript:void(0)">
                <img src="./images//product/product-img.png" alt="">
              </a>
              <a href="javascript:void(0)">
                <img src="./images//product/product-img.png" alt="">
              </a>
              <a href="javascript:void(0)">
                <img src="./images//product/product-img.png" alt="">
              </a>
              <a href="javascript:void(0)">
                <img src="./images//product/product-img.png" alt="">
              </a>
              <a href="javascript:void(0)">
                <img src="./images//product/product-img.png" alt="">
              </a>

            </div>
          </div>
        </div>
    </div>
  </div>
  <div class="footer-page"></div>
  <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
  <script src="./js/jquery-3.3.1.min.js"></script>
  <script src="./js/product.js"></script>
  <script src="./js/swiper.js"></script>
</body>
</html>